.box{
  display: -webkit-box; //  ios 6-,Safari 3.1-6
  display: -moz-box;  // Firefox
  display: -ms-flexbox;  // IE 10
  display: -webkit-flex;  // Chrome
  display: flex;  // Opera 12.1,Firefox 20+
}

body{
  margin: 0;
  display: -webkit-box; //  ios 6-,Safari 3.1-6
  display: -moz-box;  // Firefox
  display: -ms-flexbox;  // IE 10
  display: -webkit-flex;  // Chrome
  display: flex;  // Opera 12.1,Firefox 20+
  flex-direction: row;   // 从左往右排列（默认）
  flex-direction: row-reverse;  // 从右往左排列
  flex-direction: column;  // 垂直排列
  flex-direction: column-reverse;  // 从下往上

  flex-wrap: nowrap;  // 默认不换行
  flex-wrap: wrap;  // 换行，第一行在上方
  flex-wrap: wrap-reverse;  // 换行，第一行在下方

  flex-flow: row;  // flex-direction和flex-wrap的结合


  justify-content: center;  // x轴对齐方式  水平居中
  justify-content: flex-end; // 右对齐
  justify-content: flex-start;  // 左对齐
  justify-content: space-around;  // 每个项目间隔相等
  justify-content: space-between;  // 两端对齐

  align-items: center;  // y轴对齐方式  垂直居中
  align-items: flex-start;  // 顶部对齐
  align-items: flex-end;  // 底端对齐
  align-items: baseline;  // 项目的第一行基线对齐
  align-items: stretch;  // （默认值）如果项目没有设置高度或者为auto,将占满整个容器的高度

  align-content: stretch;  // (默认值)拉伸 多根y轴的对齐方式
  align-content: flex-end;  // 底对齐
  align-content: flex-start;  // 顶对齐
  align-content: center;  // 垂直居中对齐
  align-content: space-around;  // 每个项目间隔相等
  align-content: space-between;  // 两端对齐

  order: -1;  // 从小到大排列

  flex-grow: 1;  // 默认0，定义项目的放大比例

  flex-shrink: 1;  // 默认1，定义项目的缩小比例，即如果空间不足，该项目将缩小





}

// css塌陷
